<template>
    <div class="upload">
        <div class="VideoUploadHint">
            <el-upload
                    class="upload-demo"

                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                <div class="VideoUploadHint-iconBg">
                    <svg class="Zi Zi--BackToTop VideoUploadHint-icon" fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
                        <path d="M16.036 19.59a1 1 0 0 1-.997.995H9.032a.996.996 0 0 1-.997-.996v-7.005H5.03c-1.1 0-1.36-.633-.578-1.416L11.33 4.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.005z"></path></svg>
                </div>
            </el-upload>
            <div class="VideoUploadHint-title">拖放要上传的视频文件</div>

            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                <el-button style="background:  #0084ff;margin-top:12px;width: 120px;font-size: 16px" size="small" type="primary">上传视频</el-button>
            </el-upload>

            <input type="file" class="VideoUploadButton-fileInput" accept=".3gp,.asf,.avi,.dat,.f4v,.flv,.m4v,.mkv,.mov,.mp4,.mp4v,.mpe,.mpeg,.mpg,.ra,.ram,.rm,.rmvb,.vob,.webm,.wm,.wmv" multiple="">
            <div class="VideoUploadHint-uploadHint">一次最多上传 20 个视频<br>单个视频大小不超过 2 GB</div>
            <div class="VideoUploadHint-footer">
                <p>请不要添加无关的视频，详情查看
                    <a href="https://www.zhihu.com/question/20118966" target="_blank" rel="noopener noreferrer">知乎视频使用规范</a><br>
                    上传视频，即代表你同意
                    <a href="https://www.zhihu.com/term/video" target="_blank" rel="noopener noreferrer">《知乎视频用户协议》</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "upload",
        data(){
            return{
                fileList: []
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }
        }
    }
</script>

<style scoped>
    .upload{
        width: 100%;
        background: white;
    }
    .VideoUploadHint{
        -webkit-box-align: center;
        align-items: center;
        display: flex;
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        padding: 128px 0;
    }
    .VideoUploadHint-iconBg {
        -webkit-box-pack: center;
        justify-content: center;
        width: 125px;
        height: 125px;
        border-radius: 50%;
        background: #f6f6f6;
    }
    .VideoUploadHint-iconBg {
        -webkit-box-align: center;
        align-items: center;
        display: flex;
    }
    .VideoUploadHint-title {
        font-size: 24px;
        font-weight: 500;
        margin-top: 40px;
        line-height: 33px;
        color: #444;
    }
    .VideoUploadHint-title {
        color: #444;
    }
    .VideoUploadHint-button {
        width: 116px;
        margin-top: 20px;
    }
    .Button--blue {
        border-color: #0084ff;
    }
    .VideoUploadButton-fileInput {
        display: none;
    }
    input[type="file" i] {
        appearance: initial;
        background-color: initial;
        cursor: default;
        align-items: baseline;
        color: inherit;
        text-align: start !important;
        padding: initial;
        border: initial;
    }
    .VideoUploadHint-uploadHint {
        font-size: 14px;
        margin-top: 20px;
        line-height: 20px;
        text-align: center;
    }
    .VideoUploadHint-uploadHint {
        color: grey;
    }
    .VideoUploadHint-footer {
        text-align: center;
        line-height: 1.5;
    }
    .VideoUploadHint-footer {
        position: absolute;
        bottom: 20px;
        font-size: 14px;
        color: #8590a6;
    }
</style>
